<template>
  <right-canvas-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-mc">
      <dropdown-normal v-model="commonAttr.itemType" :valLists="CANVAS_MC_TYPES" label="列表组件类型" :bIsBtn="false" @change="onChangeTypeAttr" ></dropdown-normal>
      <template v-if="commonAttr.itemType == CANVAS_MC_TYPES_MAP.custom" >
        <dropdown-normal v-model="commonAttr.customClassName" :valLists="CANVAS_MC_CLASSNAME_TYPES" label="列表组件类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
        <!-- <add-img-con :url="commonAttr.spriteSheetUrl" comAttr="commonAttr" picAttr="spriteSheetUrl" :isCrop="false" :isDelete="false" class="margin-left-right-16" :height="100"></add-img-con>
        <input-normal label="雪碧图地址" v-model="commonAttr.spriteSheetUrl" @change="onChangeAttr"></input-normal>
        <textarea-normal label="雪碧图参数" v-model="commonAttr.spriteSheetParams" @change="onChangeAttr"></textarea-normal> -->
      </template>
      <template v-else>
        <input-normal label="加载jsUrl" v-model="commonAttr.loadJsUrl" @change="onChangeAttr"></input-normal>
      </template>
      
      <input-normal label="设计宽度" v-model="commonAttr.designWidth" @change="onChangeAttr"></input-normal>
      <input-normal label="设计高度" v-model="commonAttr.designHeight" @change="onChangeAttr"></input-normal>
      <!-- <textarea-normal label="关联多组件ids" placeholder="数据组件id,设置组件id" v-model="commonAttr.relateCompIds" @change="onChangeAttr"></textarea-normal> -->
      <!-- <input-normal label="加载关联组件id" v-model="commonAttr.loadRelateCompId" @change="onChangeAttr"></input-normal>
      <input-normal label="动画时间（秒）" v-model="commonAttr.animateTime" @change="onChangeAttr"></input-normal>
      <input-normal label="动画播完暂停时间（秒）" v-model="commonAttr.pauseTime" @change="onChangeAttr"></input-normal>
      <dropdown-normal label="动画播完弹出弹层" v-model="commonAttr.popId" :valLists="getLists(PAGE_TYPE_.pop)" @change="onChangeAttr"></dropdown-normal>
      <dropdown-normal label="动画播完打开页面" v-model="commonAttr.pageId" :valLists="getLists(PAGE_TYPE_.page)" @change="onChangeAttr"></dropdown-normal> -->
      <input-normal label="动画前默认图片" v-model="commonAttr.defaultPicUrl" @change="onChangeAttr"></input-normal>
      <!-- <input-normal label="页面切换隐藏组件ids" v-model="commonAttr.hiddenCompIds" @change="onChangeAttr"></input-normal> -->
      <textarea-normal label="最新自定义参数" v-model="commonAttr.injectJsClassParams" placeholder='{"operate":"2000"}' @change="onChangeAttr"></textarea-normal>
      <textarea-normal v-if="commonAttr.params" label="以前自定义参数" v-model="commonAttr.params" placeholder='{"operate":"2000"}'></textarea-normal>
      <switch-normal v-model="commonAttr.isCreatejs" label="加载js" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isCustomFont" label="加载自定义字体" @change="onChangeAttr"></switch-normal>
  </el-form>
  </right-canvas-template>
</template>
<script>
import RightCanvasTemplate from '@/views/canvas/right/right-canvas-template.vue'
import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
import InputNormal from '@/views/components/edit/InputNormal.vue'
import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'
import AddImgCon from '@/views/components/add-img-con.vue'
import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'

import { canvasUtils } from '@/views/js/canvas-utils'
import { CANVAS_MC_TYPES, CANVAS_MC_TYPES_MAP, CANVAS_MC_CLASSNAME_TYPES } from '@/common/const-canvas';

export default {
  name: "RightMc",
  mixins: [canvasUtils],
  setup () {
    return {
      CANVAS_MC_TYPES: CANVAS_MC_TYPES,
      CANVAS_MC_TYPES_MAP: CANVAS_MC_TYPES_MAP,
      CANVAS_MC_CLASSNAME_TYPES: CANVAS_MC_CLASSNAME_TYPES,
    }
  },
  created() {},
  components: {
    RightCanvasTemplate,
    DropdownNormal,
    InputNormal,
    TextareaNormal,
    AddImgCon,
    SwitchNormal,
  },
  methods: {
    onChangeTypeAttr(){
      this.commonAttr.loadJsUrl = '';
      this.onChangeAttr();
    }
  }
};
</script>
